<template>
  <div>
    <a-dropdown>
      <div class="header-avatar">
        <!-- <a-avatar class="avatar" size="small" shape="circle" src="@/assets/img/avatar.png" /> -->
<!--        <img class="avatar" src="@/assets/img/avatar.png" />-->
        <span class="name">{{ user.name }}</span>
      </div>
      <a-menu :class="['avatar-menu']" slot="overlay">
        <!-- <a-menu-item>
                          <a-icon type="user" />
                          <span>个人中心</span>
                        </a-menu-item> -->
        <a-menu-item @click="modifyPwd">
          <a-icon type="setting" />
          <span>修改密码</span>
        </a-menu-item>
        <a-menu-divider />
        <a-menu-item @click="unbinding" v-show="WXCase">
          <a-icon style="margin-right: 8px" type="disconnect" />
          <span>解绑企业微信</span>
        </a-menu-item>
        <a-menu-divider v-show="WXCase" />
        <a-menu-item @click="logout">
          <a-icon style="margin-right: 8px" type="poweroff" />
          <span>退出登录</span>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
    <modify-pwd :visible="showPwdForm" @closeForm="closeForm"></modify-pwd>
    <div class="modelDiv"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { logout } from '@/services/user';
import { removeAuthorization } from '@/utils/request';
import modifyPwd from '../../pages/userConfig/modifyPwd';
import Cookie from 'js-cookie';

export default {
  name: 'HeaderAvatar',
  components: { modifyPwd },
  computed: {
    ...mapGetters('account', ['user']),
  },
  data() {
    return {
      showPwdForm: false,
      modalVisible: false,
      Authorization: Cookie.get('Authorization'),
      WXCase: '',
    };
  },
  mounted() {},
  methods: {
    logout() {
      logout()
        .then(() => {
          localStorage.removeItem(process.env.VUE_APP_ROUTES_KEY);
          localStorage.removeItem(process.env.VUE_APP_PERMISSIONS_KEY);
          localStorage.removeItem(process.env.VUE_APP_ROLES_KEY);
          localStorage.removeItem('v3.user');
          localStorage.removeItem('v3.iconMap');
          removeAuthorization();
          if(process.env.VUE_APP_IS_DEFAULT_LOGIN == 'true'){
            this.$router.push('/login');
          } else {
            window.location.href = 'https://authserver.szpt.edu.cn/authserver/logout?service=' + encodeURIComponent('https://nrsh.szpu.edu.cn/#/login');
          }
        })
        .catch(() => {
          this.$router.push('/login');
        });
    },
    modifyPwd() {
      this.showPwdForm = true;
    },
    closeForm(val) {
      this.showPwdForm = val;
    },
    unbinding() {
      this.modalVisible = true;
    },
  },
};
</script>

<style lang="less">
.header-avatar {
  display: inline-flex;
  display: flex;
  align-items: center;
  cursor: pointer;
  .avatar,
  .name {
    align-self: center;
  }
  .avatar {
    margin-right: 8px;
    width: 32px;
    height: 32px;
  }
  .name {
    font-weight: 500;
    font-size: 16px;
  }
}
.avatar-menu {
  width: 150px;
}
</style>
